<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.font {
				font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
			}

			.color {
				color: red;
			}

			.size {
				font-size: 30px;
			}

			.bgcolor {
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<button id="font">设置字体</button>
		<button id="color">设置颜色</button>
		<button id="size">设置大小</button>
		<button id="bgcolor">设置背景</button>
		<p>这是测试文本</p>
		<button id="font2">取消字体</button>
		<button id="color2">取消颜色</button>
		<button id="size2">取消大小</button>
		<button id="bgcolor2">取消背景</button>

		<script type="text/javascript">
			// 添加样式
			var p = document.querySelector("p");
			document.querySelector("#font").onclick = function() {
				p.classList.add("font");
			}
			document.querySelector("#color").onclick = function() {
				p.classList.add("color");
			}
			document.querySelector("#size").onclick = function() {
				p.classList.add("size");
			}
			document.querySelector("#bgcolor").onclick = function() {
				p.classList.add("bgcolor");
			}

			//移除样式
			document.querySelector("#font2").onclick = function() {
				p.classList.remove("font");
			}
			document.querySelector("#color2").onclick = function() {
				p.classList.remove("color");
			}
			document.querySelector("#size2").onclick = function() {
				p.classList.remove("size");
			}
			document.querySelector("#bgcolor2").onclick = function() {
				p.classList.remove("bgcolor");
			}
		</script>
	</body>
</html>
